<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="../style/editor.css" rel="stylesheet" type="text/css">
    <script>
        var sLangDir = parent.oUtil.langDir;
        document.write("<scr" + "ipt src='language/" + sLangDir + "/webimage.js'></scr" + "ipt>");
    </script>
    <script>writeTitle()</script>
    <script src="jquery-1.7.min.js" type="text/javascript"></script>

    <!--Reflection-->
    <script src="reflection/reflection.js" type="text/javascript"></script>

    <style type="text/css">
        #inpImgURL, #inpTitle, #inpURL, #inpKeywords {
	        border:1px inset #ddd;
	        font-size:12px;
	        -moz-border-radius:3px; 
	        -webkit-border-radius:3px; 
	        padding-left:7px;
            }
        select {font-size:10pt;padding:3px;
            border: 1px solid #adadad;
            background:#ffffff;
            }
        .item {width:115px;min-height:100px;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1; *display: inline; _height: 100px;
        margin:0px 10px 5px -5px;cursor:pointer;padding:10px 5px;text-align:center;vertical-align:middle;
        }
    </style>

    <script src="common.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

        jQuery(document).ready(function ($) {
            renderEffect("images/sample.png");

            I_RealtimeImage();
            parent.oUtil.onSelectionChanged = new Function("I_RealtimeImage()");

            /*  ASSET MANAGER HERE */
            if (parent.oUtil.obj.fileBrowser != "") {
                $("#tab1").css("display", "block");
                $("#frameFiles").attr("src", parent.oUtil.obj.fileBrowser);
            }

            loadTxt(); /* language */
            if (parent.oUtil.obj.enableFlickr) {
                search(true);
            }
            else {   
                if (parent.oUtil.obj.fileBrowser != "") {
                    tabClick(1);
                    $("#tab0").css("display", "none");
                    $("#tab1").css("margin-left", "22px");
                }
                else {
                    tabClick(2);
                    $("#tab0").css("display", "none");
                    $("#tab2").css("margin-left", "22px");
                }
            }
        });

        function fileclick(src) {
            document.getElementById("inpImgURL").value = src;

            document.getElementById("divFlickrSize").style.display = "none";
            document.getElementById("divFlickrLarger").style.display = "none";
            document.getElementById("divImageSize").style.display = "block";
            
            renderEffect(src, 100);
        }

        function setSelectedIndex(s, v) {
            for (var i = 0; i < s.options.length; i++) {
                if (s.options[i].value == v) {
                    s.options[i].selected = true;
                    return;
                }
            }
        }

        function I_RealtimeImage() {
            if (parent.oUtil + '' == 'undefined') return;

            var oEditor = parent.oUtil.oEditor;

            var obj = parent.oUtil.obj;
            //obj.setFocus();

            var src;

            /* Source */
            document.getElementById('inpImgURL').value = "";

            /* Alt/Title */
            document.getElementById('inpTitle').value = "";

            /* Align */
            document.getElementsByName('optAlign')[0].selected = true;

            /* Flickr */
            document.getElementById("divFlickrSize").style.display = "none";
            document.getElementById("divFlickrLarger").style.display = "none";
            document.getElementById("divImageSize").style.display = "block";

            /* Dimension */
            document.getElementById("inpWidth").value = "";
            document.getElementById("inpHeight").value = "";

            /* OPEN LARGER IMAGE IN A LIGHTBOX */
            document.getElementById('chkOpenLarger').checked = false;

            /* HREF */
            document.getElementById('inpURL').value = "http://";

            /* OPEN IN A NEW WINDOW */
            document.getElementById('chkNewWindow').checked = false;

            /* Button */
            document.getElementById('btnInsert').value = getTxt("insert");
            
            var oSel;
            var oEl;
            if (navigator.appName.indexOf('Microsoft') != -1) {
                oSel = oEditor.document.selection.createRange();
                if (oSel.parentElement) oEl = GetElement(oSel.parentElement(), "IMG");
                else oEl = GetElement(oSel.item(0), "IMG");
            }
            else {
                oSel = oEditor.getSelection();
                oEl = GetElement(parent.getSelectedElement(oSel), "IMG");
            }

            if (oEl) {
                if (oEl.nodeName == "IMG") {

                    if (navigator.appName.indexOf('Microsoft') != -1) {
                        try {
                            var range = oEditor.document.body.createTextRange();
                            range.moveToElementText(oEl);
                            range.select();
                        } catch (e) { return; }
                    }
                    else {
                        /*var range = oEditor.document.createRange();
                        range.selectNode(oEl);
                        oSel.removeAllRanges();
                        oSel.addRange(range);*/
                        var range = oEditor.document.createRange();
                        range.selectNodeContents(oEl);
                        oSel.addRange(range);
                    }
                   
                    /* Source */
                    src = oEl.getAttribute("SRC");
                    document.getElementById('inpImgURL').value = src;
                    
                    /* Title */
                    if (oEl.getAttribute("ALT") != null) document.getElementById('inpTitle').value = oEl.getAttribute("ALT");

                    /* Align */
                    if (oEl.style.cssFloat == "") document.getElementsByName('optAlign')[0].selected = true;
                    if (oEl.style.cssFloat == "left" || oEl.style.float == "left") document.getElementsByName('optAlign')[1].selected = true;
                    if (oEl.style.cssFloat == "right" || oEl.style.float == "right") document.getElementsByName('optAlign')[2].selected = true;

                    /* Margin */
                    setSelectedIndex(document.getElementById("selMarginTop"), parseInt(oEl.style.marginTop));
                    setSelectedIndex(document.getElementById("selMarginRight"), parseInt(oEl.style.marginRight));
                    setSelectedIndex(document.getElementById("selMarginBottom"), parseInt(oEl.style.marginBottom));
                    setSelectedIndex(document.getElementById("selMarginLeft"), parseInt(oEl.style.marginLeft));

                    /* Flickr */
                    if (src.indexOf("flickr.com") != -1) {
                        document.getElementById("divFlickrSize").style.display = "block";
                        document.getElementById("divFlickrLarger").style.display = "block";
                        document.getElementById("divImageSize").style.display = "none";

                        document.getElementById("inpWidth").value = "";
                        document.getElementById("inpHeight").value = "";
                    }
                    else {
                        document.getElementById("divFlickrSize").style.display = "none";
                        document.getElementById("divFlickrLarger").style.display = "none";
                        document.getElementById("divImageSize").style.display = "block";
                     
                        if (oEl.style.width == "") {
                            document.getElementById("inpWidth").value = "";
                        } else {
                            document.getElementById("inpWidth").value = parseInt(oEl.style.width);
                        }
                        if (oEl.style.height == "") {
                            document.getElementById("inpHeight").value = "";
                        } else {
                            document.getElementById("inpHeight").value = parseInt(oEl.style.height);
                        }
                    }

                    if (src.indexOf("flickr.com") != -1 && src.indexOf("_s.jpg") != -1) { document.getElementById('rdoSize1').checked = true; }
                    if (src.indexOf("flickr.com") != -1 && src.indexOf("_t.jpg") != -1) document.getElementById('rdoSize2').checked = true;
                    if (src.indexOf("flickr.com") != -1 && src.indexOf("_m.jpg") != -1) { document.getElementById('rdoSize3').checked = true; }
                    if (src.indexOf("flickr.com") != -1 && src.indexOf("_z.jpg") != -1) document.getElementById('rdoSize5').checked = true;
                    if (src.indexOf("flickr.com") != -1 && src.indexOf("_b.jpg") != -1) document.getElementById('rdoSize6').checked = true;
                   
                    if (oEl.parentNode.nodeName == "A" && oEl.parentNode.childNodes.length == 1) {
                        var oLink = oEl.parentNode;

                        /* Align */
                        if (oLink.style.cssFloat == "") document.getElementsByName('optAlign')[0].selected = true;
                        if (oLink.style.cssFloat == "left" || oLink.style.float == "left") document.getElementsByName('optAlign')[1].selected = true;
                        if (oLink.style.cssFloat == "right" || oLink.style.float == "right") document.getElementsByName('optAlign')[2].selected = true;

                        /* OPEN LARGER IMAGE IN A LIGHTBOX */
                        if (oLink.getAttribute("rel") == "lightbox") {
                            document.getElementById('chkOpenLarger').checked = true;
                        }

                        /* HREF */
                        document.getElementById('inpURL').value = oLink.getAttribute("href")

                        /* OPEN IN A NEW WINDOW */
                        if (oLink.getAttribute("target") == "_blank") {
                            document.getElementById('chkNewWindow').checked = true;
                        }
                        
                    }

                    /* Button */
                    document.getElementById('btnInsert').value = getTxt("change");

                }
            }
        }

        function showUserphotos(username) {
            var url = "http://api.flickr.com/services/rest/?method=flickr.people.findByUsername&api_key=4e9ec6da6433b84b027dae437ec8b9de&username=" + username;
            $.getJSON(url + "&format=json&jsoncallback=?", function (data) {
                var user_id = data.user.id;
                url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=4e9ec6da6433b84b027dae437ec8b9de&user_id=" + user_id + "&safe_search=1&per_page=18&page=" + document.getElementById("hidPage").value;
                var src;
                $.getJSON(url + "&format=json&jsoncallback=?", function (data) {
                    $.each(data.photos.photo, function (i, item) {
                        src = "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_s.jpg";
                        $("<img/>").attr("src", src).attr("style", "cursor:pointer;margin:15px;float:left;border:#fff 7px solid;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3)").appendTo("#images").click(function () {
                            view("http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_");
                        });
                    });
                });
            });
        }

        function showPhotos(key) {
            var user_id = "";
            var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=4e9ec6da6433b84b027dae437ec8b9de&tags=" + key + "&user_id=" + user_id + "&safe_search=1&per_page=20&page=" + document.getElementById("hidPage").value;
            var src;
            $.getJSON(url + "&format=json&jsoncallback=?", function (data) {
                $.each(data.photos.photo, function (i, item) {
                    src = "http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_s.jpg";
                    $("<img/>").attr("src", src).attr("class", 'img').attr("style", "cursor:pointer;margin:15px;float:left;border:#fff 7px solid;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3)").appendTo("#images").click(function () {
                        view("http://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_");
                    });
                });
            });
        }

        function search(bNew) {
            if (bNew) {
                document.getElementById("hidPage").value = 1; /*Reset Paging*/
                document.getElementById("images").innerHTML = "";
            }
            var key = $("#inpKeywords").val().replace(" ", "+");
            var username = $("#inpUsername").val().replace(" ", "+");

            if (username != "") {
                showUserphotos(username);
            }
            else if (key != "") {
                showPhotos(key);
            }
            else {
                showUserphotos(parent.oUtil.obj.flickrUser);
            }
        }

        function loadmore() {
            document.getElementById("hidPage").value = (document.getElementById("hidPage").value * 1) + 1;
            search(false);
        }

        function view(src) {
            var size;
            var rdoSizes = document.getElementsByName("rdoSize")
            for (i = 0; i < rdoSizes.length; i++) if (rdoSizes[i].checked == true) size = rdoSizes[i].value;
            //if (size == "z" || size == "b") size = "m";
            //$("<img/>").attr("src", src + size + '.jpg').appendTo("#preview");
            document.getElementById("inpImgURL").value = src + size + '.jpg';

            for (var i = 0; i < document.getElementById("images").childNodes.length; i++) {
                document.getElementById("images").childNodes[i].style.border = "#ffffff 7px solid";
                if(document.getElementById("images").childNodes[i].src == src + 's.jpg')            
                document.getElementById("images").childNodes[i].style.border = "#e9ed03 7px solid";
            }

            document.getElementById("divFlickrSize").style.display = "block"; 
            document.getElementById("divFlickrLarger").style.display = "block";
            document.getElementById("divImageSize").style.display = "none";
            document.getElementById("inpWidth").value = "";
            document.getElementById("inpHeight").value = "";

            renderEffect(src + "t" + '.jpg');
        }

        function renderEffect(src, width) {
            var sw = "";
            if (width) sw = 'width:75px;height:90px;';

            $("#box1").html("").attr("style", "background:none;");
            $("#box2").html("").attr("style", "background:none;");
            $("#box3").html("").attr("style", "background:none;");
            $("#box4").html("").attr("style", "background:none;");
            $("#box5").html("").attr("style", "background:none;");
            $("#box6").html("").attr("style", "background:none;");
            $("#box7").html("").attr("style", "background:none;");
            $("#box8").html("").attr("style", "background:none;");
            $("#box9").html("").attr("style", "background:none;");
            $("#box10").html("").attr("style", "background:none;");
            size = "t";
            $("<img/>").attr("src", src).attr("style", sw + "").appendTo("#box1").click(function () {
                $("#box1").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(1);
            });
            $("<img/>").attr("src", src).attr("style", sw + "border:#fff 7px solid;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3)").appendTo("#box2").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(2);
            });
            $("<img/>").attr("src", src).attr("style", sw + "border:#fff 7px solid;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);").appendTo("#box3").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(3);
            });
            $("<img/>").attr("src", src).attr("style", sw + "-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;").appendTo("#box4").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(4);
            });
            $("<img/>").attr("src", src).attr("style", sw + "border:#fff 7px solid;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-border-radius:7px;border-radius:7px;").appendTo("#box5").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(5);
            });
            $("<img/>").attr("src", src).attr("style", sw + "border:#fff 7px solid;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-border-radius:7px;border-radius:7px;").appendTo("#box6").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(6);
            });
            $("<img/>").attr("src", src).attr("style", sw + "float:right;margin-right:15px").attr("class", "reflect").appendTo("#box7").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(7);
            });
            $("<img/>").attr("src", src).attr("style", sw + "padding: 5px;border: solid 1px #ddd;").appendTo("#box8").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(8);
            });
            $("<img/>").attr("src", src).attr("style", sw + "padding: 5px;border: solid 1px #ddd;-webkit-border-radius: 50em;-moz-border-radius: 50em;border-radius: 50em;").appendTo("#box9").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box10").attr("style", "");
                $("#hidEffect").val(9);
            });
            $("<img/>").attr("src", src).attr("style", sw + "padding: 5px;border: solid 1px #ddd;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);").appendTo("#box10").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#hidEffect").val(10);
            });
            $('img.reflect').reflect();
        }

        function changeSize() {
            var sURL = document.getElementById("inpImgURL").value;
            if (sURL == "") return;
            var size;
            var rdoSizes = document.getElementsByName("rdoSize")
            for (i = 0; i < rdoSizes.length; i++) if (rdoSizes[i].checked == true) size = rdoSizes[i].value;

            var ss = document.getElementById("inpImgURL").value.substr(0, document.getElementById("inpImgURL").value.length - 5);
            document.getElementById("inpImgURL").value = ss + size + '.jpg';
        }

       /* jQuery(document).ready(function ($) {

            parent.oUtil.obj.setFocus();
            if (!parent.oUtil.obj.checkFocus()) { parent.oUtil.obj.setFocus(); alert(0) } //Focus stuff
            var oEditor;
            if (parent.oUtil + '' == 'undefined') oEditor = (window.opener ? window.opener : openerWin).oUtil.oEditor;
            else oEditor = parent.oUtil.oEditor;

            var oSaveSel = parent.oUtil.obj.oSel;
            var oSaveRange = oSaveSel.getRangeAt(0);

            var oSel = oEditor.getSelection();
            oSel.removeAllRanges();
            oSel.addRange(oSaveRange);

            //I_RealtimeLink();
            //parent.oUtil.onSelectionChanged = new Function("I_RealtimeLink()");
            //
            //Di parent:
            //oEdit1.onSelectionChanged = function () {
            //    var obj = oUtil.obj;
            //    obj.oSel = oEditor.getSelection();
            //};

        });*/

        function I_Change(oEl) {
            var obj = parent.oUtil.obj;
            obj.setFocus();

            var oEditor = parent.oUtil.oEditor;

            var oSel;
            if (navigator.appName.indexOf('Microsoft') != -1) {
                oSel = oEditor.document.selection.createRange();
            }
            else {
                oSel = oEditor.getSelection();
            }

            /* Source */
            var src = document.getElementById('inpImgURL').value;
            oEl.setAttribute("SRC", src);

            /* Title */
            oEl.setAttribute("ALT", document.getElementById('inpTitle').value);
            oEl.setAttribute("TITLE", document.getElementById('inpTitle').value);

            /* Effect */
            var nEff = $("#hidEffect").val();
            if (nEff != "") { oEl.style.cssText = ""; }
            applyEffect(oEl)

            /* Margin */
            var nMarginTop = document.getElementById("selMarginTop").value;
            var nMarginRight = document.getElementById("selMarginRight").value;
            var nMarginBottom = document.getElementById("selMarginBottom").value;
            var nMarginLeft = document.getElementById("selMarginLeft").value;            
            if (document.getElementById("selAlign").value == "left")
                oEl.style.cssText = oEl.style.cssText + ";float:left;margin-top:" + nMarginTop + "px;margin-right:" + nMarginRight + "px;margin-bottom:" + nMarginBottom + "px;margin-left:" + nMarginLeft + "px;";
            else if (document.getElementById("selAlign").value == "right")
                oEl.style.cssText = oEl.style.cssText + ";float:right;margin-top:" + nMarginTop + "px;margin-right:" + nMarginRight + "px;margin-bottom:" + nMarginBottom + "px;margin-left:" + nMarginLeft + "px;";
            else {
                oEl.style.cssText = oEl.style.cssText + ";float:none;margin-top:" + nMarginTop + "px;margin-right:" + nMarginRight + "px;margin-bottom:" + nMarginBottom + "px;margin-left:" + nMarginLeft + "px;";
            }

            /* Dimension */
            if (document.getElementById("inpWidth").value != "") {
                oEl.style.cssText = oEl.style.cssText + ";width:" + document.getElementById("inpWidth").value + "px;";
            }
            if (document.getElementById("inpHeight").value != "") {
                oEl.style.cssText = oEl.style.cssText + ";height:" + document.getElementById("inpHeight").value + "px;";
            }

            /* Flickr */
            if (src.indexOf("flickr.com") != -1) {
                document.getElementById("divFlickrSize").style.display = "block";
                document.getElementById("divFlickrLarger").style.display = "block";
                document.getElementById("divImageSize").style.display = "none";

                document.getElementById("inpWidth").value = "";
                document.getElementById("inpHeight").value = "";
            }
            else {
                document.getElementById("divFlickrSize").style.display = "none";
                document.getElementById("divFlickrLarger").style.display = "none";
                document.getElementById("divImageSize").style.display = "block";
            }

            /* Link URL */
            var sLinkURL = "";
            if (document.getElementById("inpImgURL").value.indexOf("flickr.com") != -1 && document.getElementById("chkOpenLarger").checked) {
                var ss = document.getElementById("inpImgURL").value.substr(0, document.getElementById("inpImgURL").value.length - 5);
                sLinkURL = ss + 'z.jpg';
            }
            else {
                sLinkURL = document.getElementById("inpURL").value;
                if (sLinkURL == "http://") sLinkURL = "";
            }

            if (oEl.parentNode.nodeName == "A" && oEl.parentNode.childNodes.length == 1) {

                var oLink = oEl.parentNode;

                if (sLinkURL == "") {
                    oLink.setAttribute("style", "");
                    oEditor.document.execCommand("unlink", false, null);
                    obj.cleanEmptySpan()
                    return; 
                }

                /* Title */
                oLink.setAttribute("title", document.getElementById('inpTitle').value);

                /* Align */
                oLink.style.cssFloat = document.getElementById('selAlign').value; /*TODO: Di IE7 jadi cssFloat:left/right, tp tdk problem*/

                /* OPEN LARGER IMAGE IN A LIGHTBOX */
                if (document.getElementById('chkOpenLarger').checked) {
                    oLink.setAttribute("rel", "lightbox");
                    oLink.setAttribute("target", "");
                }

                /* HREF */
                oLink.setAttribute("href", document.getElementById('inpURL').value);

                /* OPEN IN A NEW WINDOW */
                if (document.getElementById('chkNewWindow').checked) {
                    oLink.setAttribute("target", "_blank");
                    oLink.setAttribute("rel", "");
                }
            }
            else {
                
                if (sLinkURL == "") return;

                /* Link Title */
                var sTitle = document.getElementById("inpTitle").value;

                /* Link Css Style */
                var sCssStyle = "";
                var nMarginTop = document.getElementById("selMarginTop").value;
                var nMarginRight = document.getElementById("selMarginRight").value;
                var nMarginBottom = document.getElementById("selMarginBottom").value;
                var nMarginLeft = document.getElementById("selMarginLeft").value;
                if (document.getElementById("selAlign").value == "left")
                    sCssStyle = "float:left;margin-top:" + nMarginTop + "px;margin-right:" + nMarginRight + "px;margin-bottom:" + nMarginBottom + "px;margin-left:" + nMarginLeft + "px;";
                else if (document.getElementById("selAlign").value == "right")
                    sCssStyle = "float:right;margin-top:" + nMarginTop + "px;margin-right:" + nMarginRight + "px;margin-bottom:" + nMarginBottom + "px;margin-left:" + nMarginLeft + "px;";
                else
                    sCssStyle = "margin-top:" + nMarginTop + "px;margin-right:" + nMarginRight + "px;margin-bottom:" + nMarginBottom + "px;margin-left:" + nMarginLeft + "px;";


                if (navigator.userAgent.indexOf('Safari') != -1) {
                    var range = oSel.getRangeAt(0);
                    var newA = oEditor.document.createElement("A");
                    newA.href = sLinkURL;
                    range.selectNode(oEl);
                    range.surroundContents(newA);

                    range.selectNodeContents(oEl);
                    range.setEndAfter(oEl);

                    oSel.removeAllRanges();
                    oSel.addRange(range);
                }
                else {
                    oEditor.document.execCommand("CreateLink", false, sLinkURL); //tdk jalan di SAFARI
                }
                
                var oElement;
                if (navigator.appName.indexOf('Microsoft') != -1) {
                    oSel = oEditor.document.selection.createRange();
                    if (oSel.parentElement) oElement = GetElement(oSel.parentElement(), "A");
                    else oElement = GetElement(oSel.item(0), "A");
                }
                else {
                    oSel = oEditor.getSelection();
                    oElement = GetElement(parent.getSelectedElement(oSel), "A");
                }

                if (oElement) {
                    oElement.setAttribute("title", sTitle)
                    oElement.setAttribute("style", sCssStyle)
                    if (document.getElementById("chkNewWindow").checked) {
                        oElement.setAttribute("rel", "");
                        oElement.setAttribute("target", "_blank");
                    }
                    if (document.getElementById("chkOpenLarger").checked) {
                        oElement.setAttribute("rel", "lightbox");
                        oElement.setAttribute("target", "");
                    }
                }
            }
        }

        function I_Insert() {           
            if (document.getElementById("inpImgURL").value == "") return false;

            var obj = parent.oUtil.obj;
            obj.setFocus();
            var oEditor = parent.oUtil.oEditor;

            var oSel;
            var oEl;
            if (navigator.appName.indexOf('Microsoft') != -1) {

                var oSel = oEditor.document.selection.createRange();

                if (oSel.parentElement) oEl = GetElement(oSel.parentElement(), "IMG");
                else oEl = GetElement(oSel.item(0), "IMG");

                if (oEl) {
                    I_Change(oEl); 
                    return;
                }
            }
            else {
                oSel = oEditor.getSelection();
                oEl = GetElement(parent.getSelectedElement(oSel), "IMG");

                if (oEl) {
                    if (oEl.nodeName == "IMG") {
                        I_Change(oEl);
                        return;
                    }
                }
            }

            /* Link URL */
            var sLinkURL = "";
            if (document.getElementById("chkOpenLarger").checked) {
                var ss = document.getElementById("inpImgURL").value.substr(0, document.getElementById("inpImgURL").value.length - 5);
                sLinkURL = ss + 'z.jpg';
            }
            else {
                sLinkURL = document.getElementById("inpURL").value;
                if (sLinkURL == "http://") sLinkURL = "";
            }

            /* Link Title */
            var sTitle = document.getElementById("inpTitle").value;

            /* Link Target */
            var sTarget = "";
            if (document.getElementById("chkNewWindow").checked) sTarget = "_blank";

            /* Link Css Style */
            var sCssStyle = "";
            var nMarginTop = document.getElementById("selMarginTop").value;
            var nMarginRight = document.getElementById("selMarginRight").value;
            var nMarginBottom = document.getElementById("selMarginBottom").value;
            var nMarginLeft = document.getElementById("selMarginLeft").value;
            if (document.getElementById("selAlign").value == "left")
                sCssStyle = "float:left;margin-top:" + nMarginTop + "px;margin-right:" + nMarginRight + "px;margin-bottom:" + nMarginBottom + "px;margin-left:" + nMarginLeft + "px;";
            else if (document.getElementById("selAlign").value == "right")
                sCssStyle = "float:right;margin-top:" + nMarginTop + "px;margin-right:" + nMarginRight + "px;margin-bottom:" + nMarginBottom + "px;margin-left:" + nMarginLeft + "px;";
            else
                sCssStyle = "margin-top:" + nMarginTop + "px;margin-right:" + nMarginRight + "px;margin-bottom:" + nMarginBottom + "px;margin-left:" + nMarginLeft + "px;";

            /* Dimension */
            if (document.getElementById("inpWidth").value != "") {
                sCssStyle += ";width:" + document.getElementById("inpWidth").value + "px;";
            }
            if (document.getElementById("inpHeight").value != "") {
                sCssStyle += ";height:" + document.getElementById("inpHeight").value + "px;";
            }

            /* Image URL */
            var sImgURL = document.getElementById("inpImgURL").value;

            /* Image Css Class */
            var sImgCssClass = "";
//            if (document.getElementById("chkReflection").checked) sImgCssClass = "reflect";

            /* Image Css Style */
            var sImgCssStyle = "";
            if (sLinkURL == "") sImgCssStyle = sCssStyle;

            /* INSERT IMAGE */
            var oImg = I_InsertImage(sImgURL, sTitle, sImgCssClass, sImgCssStyle);

            /* INSERT LINK */
            if (sLinkURL != "") {
                var oElement = I_CreateLink(sLinkURL, sTitle, sTarget, "", sCssStyle);

                /* Append Image to Link, Add Lightbox */
                if (oElement) {
                    if (navigator.appName.indexOf('Microsoft') != -1) {
                        if (document.getElementById("chkOpenLarger").checked) {
                            oElement.rel = "lightbox";
                            oElement.target = "";
                        }
                    }
                    else {
                        oElement.innerHTML = "";
                        oElement.appendChild(oImg);
                        if (document.getElementById("chkOpenLarger").checked) {
                            oElement.setAttribute("rel", "lightbox");
                            oElement.setAttribute("target", "");
                        }
                    }
                }
            }

            /* EFFECTS */
            applyEffect(oImg)

            /* PENTING: Update Selection (sebenarnya utk IE saja) */
            var obj = parent.oUtil.obj;
            parent.editorDoc_onkeyup(obj.oName);

            return true;
        }

        function applyEffect(oImg) {
            var nEff = $("#hidEffect").val();
            
            if (nEff == "") {return;}

            if (nEff == 1) {
                oImg.style.cssText = oImg.style.cssText + ";" + "";
            }
            if (nEff == 2) {
                oImg.style.cssText = oImg.style.cssText + ";" + "border:#fff 7px solid;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3)";
            }
            if (nEff == 3) {
                oImg.style.cssText = oImg.style.cssText + ";" + "border:#fff 7px solid;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);";
            }
            if (nEff == 4) {
                oImg.style.cssText = oImg.style.cssText + ";" + "-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;";
            }
            if (nEff == 5) {
                oImg.style.cssText = oImg.style.cssText + ";" + "border:#fff 7px solid;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-border-radius:7px;border-radius:7px;";
            }
            if (nEff == 6) {
                oImg.style.cssText = oImg.style.cssText + ";" + "border:#fff 7px solid;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-border-radius:7px;border-radius:7px;";
            }
            if (nEff == 7) {
                if (navigator.appName.indexOf('Microsoft') != -1) {
                    oImg.style.className = "reflect";
                }
                else {
                    oImg.setAttribute("class", "reflect");
                }
            }
            if (nEff == 8) {
                oImg.style.cssText = oImg.style.cssText + ";" + "padding: 5px;border: solid 1px #ddd;";
            }
            if (nEff == 9) {
                oImg.style.cssText = oImg.style.cssText + ";" + "padding: 5px;border: solid 1px #ddd;-webkit-border-radius: 50em;-moz-border-radius: 50em;border-radius: 50em;";
            }
            if (nEff == 10) {
                oImg.style.cssText = oImg.style.cssText + ";" + "padding: 5px;border: solid 1px #ddd;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);";
            }
        }

        var storeBgColor, storeColor;
        function over(me, hover) {
            storeBgColor = me.style.backgroundColor;
            if (!hover) me.style.backgroundColor = '#c90000';
            else me.style.backgroundColor = hover;
            storeColor = me.style.color;
            me.style.color = '#fff';
        }
        function out(me) {
            me.style.backgroundColor = storeBgColor;
            me.style.color = storeColor;
        }

        function tabClick(n) {
            if (n == 0) {
                $("#divFlickr").css("display", "block");
                $("#tab0").css("background", "#fcfcfc");
                $("#divFiles").css("display", "none");
                $("#tab1").css("background", "#ccc");
                $("#divBoxes").css("display", "none");
                $("#tab2").css("background", "#ccc");
            }
            if (n == 1) {
                $("#divFlickr").css("display", "none");
                $("#tab0").css("background", "#ccc");
                $("#divFiles").css("display", "block");
                $("#tab1").css("background", "#fcfcfc");
                $("#divBoxes").css("display", "none");
                $("#tab2").css("background", "#ccc");
            }
            if (n == 2) {
                $("#divFlickr").css("display", "none");
                $("#tab0").css("background", "#ccc");
                $("#divFiles").css("display", "none");
                $("#tab1").css("background", "#ccc");
                $("#divBoxes").css("display", "block");
                $("#tab2").css("background", "#fcfcfc");
            }

        }
    </script>

</head>
<body style="margin-top:12px;margin-left:10px">

<input id="hidPage" type="hidden" value="1" />
<input id="hidEffect" type="hidden" value="" />

<div id="tab2" onclick="tabClick(2)" style="float:left;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:105px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#fcfcfc;margin-left:22px;margin-top:7px">
    EFFECTS
</div>
<div id="tab0" onclick="tabClick(0)" style="float:left;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:105px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#ccc;margin-left:5px;margin-top:7px">
    FLICKR
</div> 
<div id="tab1" onclick="tabClick(1)" style="display:none;float:left;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:105px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#ccc;margin-left:5px;margin-top:7px">
    MY FILES
</div>
<div style="clear:left"></div>

<table cellpadding="0" cellspacing="0" style="margin-left:7px;">
<tr>
<td>

    <div id="divFlickr" style="color:#000;padding:0px;padding-right:0px;width:415px;height:480px;overflow:auto;border-top:none;background:#fcfcfc;display:none;">
        <div style="margin-top:20px;margin-left:15px">
        <div style="margin-top:10px;margin-bottom:15px;font-size:10px;letter-spacing:1px"><span id="lblTag">TAG:</span>
            <input id="inpKeywords" type="text" style="width:230px;height:23px;"/>
            <input id="btnSearch" type="button" onclick="document.getElementById('inpUsername').value='';search(true)" value=" Search " class="inpBtn" style="height:27px;" />
        </div>

        <div style="display:none">
        &nbsp;&nbsp;&nbsp;   
        <span id="lblFlickrUserName">Flickr User Name:</span> <input id="inpUsername" type="text" style="width:100px"/>
        <input id="btnSearch" type="button" onclick="document.getElementById('inpKeywords').value='';search(true)" value=" Show User's Photos " class="inpBtn" />
        </div>

        <div id="images" style="margin-left:-6px;"></div>
        <div style="clear:left"></div>
        <div style="text-align:center;margin-top:15px;margin-bottom:15px">
        <a id="lnkLoadMore" href="javascript:loadmore()" style="font-size:10pt">Load More</a>        
        </div>
        <div style="font-size:11px;font-style:italic;color:#aaa">This product uses the Flickr API but is not endorsed or certified by Flickr.</div>
        </div>
    </div>

    <div id="divFiles" style="color:#000;padding:0px;padding-right:0px;width:415px;height:480px;border-top:none;background:#fcfcfc;display:none;">
        <iframe id="frameFiles" frameBorder="0" src="" style="width:100%;height:480px;margin-bottom:7px;"></iframe>
    </div>

    <div id="divBoxes" style="color:#000;padding:0px;padding-right:0px;width:415px;height:480px;overflow:auto;border-top:none;background:#fcfcfc;">
        <div style="margin-top:20px;margin-left:15px">
        <div id="box1" class="item">
        </div>
        <div id="box2" class="item">
        </div>
        <div id="box3" class="item">
        </div>
        <div id="box4" class="item">
        </div>
        <div id="box5" class="item">
        </div>
        <div id="box6" class="item">
        </div>
        <!--<div id="box7" class="item">
        </div>-->
        <div id="box8" class="item">
        </div>        
        <div id="box10" class="item">
        </div>        
        <div id="box9" class="item">
        </div>
        </div>
    </div>

</td>
<td style="padding-left:20px;height:395px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;" valign="top">


    <div style="margin-bottom:7px;font-size:10px;letter-spacing:1px" id="lblImgSrc">IMAGE SOURCE:</div>
    <input id="inpImgURL" type="text" style="width:250px;height:23px;" />
    <br /><br />

    <div style="margin-bottom:7px;font-size:10px;letter-spacing:1px" id="lblTitle">TITLE:</div>
    <input id="inpTitle" type="text" style="width:250px;height:23px;" />
    <br /><br />

    <table cellpadding="0" cellspacing="0">
    <tr>
    <td>
        <div style="margin-bottom:7px;font-size:10px;letter-spacing:1px" id="lblAlign">ALIGN:</div>
        <select id="selAlign">
            <option value="" id="optAlign" name="optAlign"></option>
            <option value="left" id="optAlign" name="optAlign">Left</option>
            <option value="right" id="optAlign" name="optAlign">Right</option>
        </select>
    </td>
    </tr>
    </table>
    <br />

    <table cellpadding="0" cellspacing="0">
    <tr>
    <td>
        <div style="margin-bottom:7px;font-size:10px;letter-spacing:1px" id="lblMargin">MARGIN: (TOP / RIGHT / BOTTOM / LEFT)</div>
        <select id="selMarginTop">
            <option value="0"></option>
            <option value="1">1px</option>
            <option value="2">2px</option>
            <option value="3">3px</option>
            <option value="4">4px</option>
            <option value="5">5px</option>
            <option value="6">6px</option>
            <option value="7">7px</option>
            <option value="8">8px</option>
            <option value="9">9px</option>
            <option value="10">10px</option>
            <option value="11">11px</option>
            <option value="12">12px</option>
            <option value="13">13px</option>
            <option value="14">14px</option>
            <option value="15">15px</option>
            <option value="16">16px</option>
            <option value="17">17px</option>
            <option value="18">18px</option>
            <option value="19">19px</option>
            <option value="20">20px</option>
            <option value="25">25px</option>
            <option value="30">30px</option>
            <option value="35">35px</option>
            <option value="40">40px</option>
        </select> 
        <select id="selMarginRight">
            <option value="0"></option>
            <option value="1">1px</option>
            <option value="2">2px</option>
            <option value="3">3px</option>
            <option value="4">4px</option>
            <option value="5">5px</option>
            <option value="6">6px</option>
            <option value="7">7px</option>
            <option value="8">8px</option>
            <option value="9">9px</option>
            <option value="10">10px</option>
            <option value="11">11px</option>
            <option value="12">12px</option>
            <option value="13">13px</option>
            <option value="14">14px</option>
            <option value="15">15px</option>
            <option value="16">16px</option>
            <option value="17">17px</option>
            <option value="18">18px</option>
            <option value="19">19px</option>
            <option value="20">20px</option>
            <option value="25">25px</option>
            <option value="30">30px</option>
            <option value="35">35px</option>
            <option value="40">40px</option>
        </select>
        <select id="selMarginBottom">
            <option value="0"></option>
            <option value="1">1px</option>
            <option value="2">2px</option>
            <option value="3">3px</option>
            <option value="4">4px</option>
            <option value="5">5px</option>
            <option value="6">6px</option>
            <option value="7">7px</option>
            <option value="8">8px</option>
            <option value="9">9px</option>
            <option value="10">10px</option>
            <option value="11">11px</option>
            <option value="12">12px</option>
            <option value="13">13px</option>
            <option value="14">14px</option>
            <option value="15">15px</option>
            <option value="16">16px</option>
            <option value="17">17px</option>
            <option value="18">18px</option>
            <option value="19">19px</option>
            <option value="20">20px</option>
            <option value="25">25px</option>
            <option value="30">30px</option>
            <option value="35">35px</option>
            <option value="40">40px</option>
        </select>
        <select id="selMarginLeft">
            <option value="0"></option>
            <option value="1">1px</option>
            <option value="2">2px</option>
            <option value="3">3px</option>
            <option value="4">4px</option>
            <option value="5">5px</option>
            <option value="6">6px</option>
            <option value="7">7px</option>
            <option value="8">8px</option>
            <option value="9">9px</option>
            <option value="10">10px</option>
            <option value="11">11px</option>
            <option value="12">12px</option>
            <option value="13">13px</option>
            <option value="14">14px</option>
            <option value="15">15px</option>
            <option value="16">16px</option>
            <option value="17">17px</option>
            <option value="18">18px</option>
            <option value="19">19px</option>
            <option value="20">20px</option>
            <option value="25">25px</option>
            <option value="30">30px</option>
            <option value="35">35px</option>
            <option value="40">40px</option>
        </select>
    </td>
    </tr>
    </table>

    <div style="margin-top:12px;margin-bottom:7px;height:50px">
        <div id="divFlickrSize" style="display:none;">
            <input id="rdoSize1" name="rdoSize" type="radio" value="s" group="size" onclick="changeSize()" /><label for="rdoSize1" id="lblSize1">SMALL SQUARE</label>
            <input id="rdoSize2" name="rdoSize" type="radio" value="t" group="size" onclick="changeSize()" /><label for="rdoSize2" id="lblSize2">THUMBNAIL</label>
            <input id="rdoSize3" name="rdoSize" type="radio" value="m" group="size" onclick="changeSize()" checked="checked" /><label for="rdoSize3" id="lblSize3">SMALL</label><br />
            <input id="rdoSize5" name="rdoSize" type="radio" value="z" group="size" onclick="changeSize()" /><label for="rdoSize5" id="lblSize5">MEDIUM</label>
            <input id="rdoSize6" name="rdoSize" type="radio" value="b" group="size" onclick="changeSize()" /><label for="rdoSize6" id="lblSize6">LARGE</label>
        </div>
        <div id="divImageSize" style="display:none;font-size:10px;letter-spacing:1px">
            <label id="lblWidthHeight" for="inpWidth">WIDTH x HEIGHT:</label>
            <input id="inpWidth" type="text" value="" style="width:50px;height:23px;"/> x 
            <input id="inpHeight" type="text" value="" style="width:50px;height:23px;"/> px
        </div>
    </div>


    <div style="border-top:#fff 1px solid;border-bottom:#ccc 1px solid;margin-top:15px;margin-bottom:15px;margin-left:0px;width:265px"></div>

    <div style="height:30px">
        <div id="divFlickrLarger" style="display:none;">
        <div style="margin-bottom:15px;font-size:10px;letter-spacing:1px">
        <input id="chkOpenLarger" type="checkbox" /><label for="chkOpenLarger" id="lblOpenLarger">OPEN LARGER IMAGE IN A LIGHTBOX, OR</label>
        </div>
        </div>
    </div>

    <div style="margin-bottom:7px;font-size:10px;letter-spacing:1px" id="lblLinkToUrl">LINK TO URL:</div>
    <input id="inpURL" type="text" value="http://" style="width:250px;height:23px;"/> 

    <div style="margin-top:7px;margin-bottom:20px;font-size:10px;letter-spacing:1px">
    <input id="chkNewWindow" type="checkbox" /><label for="chkNewWindow" id="lblNewWindow">OPEN IN A NEW WINDOW.</label>         
    </div>


    <input type="button" name="btnCancel" id="btnCancel" value="cancel" onclick="I_Close()" class="inpBtn" style="width:120px;height:33px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'" />
    <input type="button" name="btnInsert" id="btnInsert" value="insert" onclick="if(I_Insert())I_Close()" class="inpBtn" style="width:120px;height:33px" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'" />



</td>
</tr>
</table>

</body>
</html>
